<template>
  <div>
    <h1 style="text-align:center">商品管理</h1>
    <br/>
    <div style="background-color: aliceblue;border-radius: 25px;">
      <table>
          <thead>
              <tr>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th>库存</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="(item, index) in items" :key="item.id">
                  <td>{{ item.name }}</td>
                  <td>{{ item.price }}</td>
                  <td>{{ item.stock }}</td>
                  <td>
                  <button @click="editItem(index)">编辑</button>
                  <button @click="deleteItem(index)">删除</button>
                  </td>
              </tr>
          </tbody>
      </table>
      <center><button @click="addItem">新增商品</button></center>
    </div>
    
    

    <div v-if="editingItem">
      <h3 style="text-align: center;">{{ editingItemIndex === null ? '新增商品' : '编辑商品' }}</h3>
      <form @submit.prevent="saveItem" style="background-color: aliceblue;text-align: center;">
        <label for="name">商品名称:</label>
        <input type="text" v-model="editingItem.name" required /><br/>
        <label for="price">商品价格:</label>
        <input type="number" v-model="editingItem.price" required /><br/>
        <label for="stock">商品库存:</label>
        <input type="number" v-model="editingItem.stock" required /><br/>
        <button type="submit">{{ editingItemIndex === null ? '新增' : '保存' }}</button>
        <button type="button" @click="cancelEdit">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name:"Shop",
  data() {
    return {
      items: [
        { id: 1, name: '红烧肉', price: 10, stock: 100 },
        { id: 2, name: '鱼香茄子', price: 20, stock: 50 },
        { id: 3, name: '宫保鸡丁', price: 15, stock: 80 },
      ],
      editingItemIndex: null,
      editingItem: null,
    };
  },
  methods: {
    addItem() {
        this.editingItemIndex = null;
        this.editingItem = { name: '', price: '', stock: '' };
        localStorage.setItem("abc",items)
      },
    editItem(index) {
      this.editingItemIndex = index;
      this.editingItem = { ...this.items[index] };
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
    saveItem() {
      if (this.editingItemIndex === null) {
        // 新增商品
        this.editingItem.id = this.items.length + 1;
        this.items.push(this.editingItem);
        localStorage.getItem("abc")
      } else {
        // 编辑商品
        this.items.splice(this.editingItemIndex, 1, this.editingItem);
        localStorage.getItem("abc")
      }
      this.cancelEdit();
    },
    cancelEdit() {
      this.editingItemIndex = null;
      this.editingItem = null;
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

button {
  margin-top: 8px;
}
</style>